<template>
  <div class="license-container">
    <div class="login-box">
      <h2 class="title">车牌识别登录</h2>
      
      <!--摄像头区域-->
      <div class="camera-container">
        <video
          id="videoCamera"
          :width="videoWidth"
          :height="videoHeight"
          autoplay
          class="camera-view"
        ></video>
        <canvas
          style="display: none"
          id="canvasCamera"
          :width="videoWidth"
          :height="videoHeight"
        ></canvas>
      </div>

      <!--按钮区域-->
      <div class="action-area">
        <el-button 
          type="primary" 
          @click="faceVef()"
          :loading="faceImgState"
          class="recognition-btn"
        >
          {{ faceImgState ? '正在识别中...' : '开始识别' }}
        </el-button>
      </div>

      <!--消息区域-->
      <div class="message-area">
        <div class="server-msg" v-if="msg">{{ msg }}</div>
        <div class="welcome">欢迎使用车牌识别系统</div>
      </div>
    </div>
  </div>
</template>

<script>
import $camera from '../camera/index.js';

export default {
  name: 'LicensePlateRecognition',
  data() {
    return {
      videoWidth: 400,  // 增加摄像头画面尺寸
      videoHeight: 300,
      msg: '',
      faceImgState: false,
      faceOption: {}
    };
  },
  mounted() {
    // 调用摄像头
    this.faceOption = $camera.getCamera({
      videoWidth: this.videoWidth,
      videoHeight: this.videoHeight,
      thisCancas: null,
      thisContext: null,
      thisVideo: null,
      canvasId: 'canvasCamera',
      videoId: 'videoCamera'
    });

    this.getCompetence();
  },
  methods: {
    // 调用后台接口
    faceVef() {
      if (this.faceImgState) {
        return;
      }

      // 开始绘制图片
      let imageBase = $camera.draw(this.faceOption);
      
      if (!imageBase) {
        this.$message.error("未能获取到图像数据");
        return;
      }

      this.faceImgState = true;
      this.msg = '正在识别中...';

      this.$axios.post("api/parkingService/addCarParkingRecord", { imageBase })
        .then(res => {
          console.log(res);
          if (res.data.code === 200) {
            this.$message.success('识别成功');
            // 关闭摄像头
            this.faceOption.thisVideo.srcObject.getTracks()[0].stop();
            // 跳转到工作台
            this.$router.replace('/workbench');
          } else {
            this.$message.warning(res.data.msg || '识别失败，请重试');
          }
        })
        .catch(error => {
          console.error('识别出错:', error);
          this.$message.error('系统错误，请稍后重试');
        })
        .finally(() => {
          this.faceImgState = false;
          this.msg = '';
        });
    },
    
    // 获取摄像头权限
    getCompetence() {
      if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({ video: true })
          .catch(error => {
            this.$message.error('无法访问摄像头，请确保已授予摄像头权限');
            console.error('摄像头访问错误:', error);
          });
      } else {
        this.$message.error('您的浏览器不支持摄像头功能');
      }
    }
  },
  beforeDestroy() {
    // 组件销毁前关闭摄像头
    if (this.faceOption.thisVideo && this.faceOption.thisVideo.srcObject) {
      this.faceOption.thisVideo.srcObject.getTracks()[0].stop();
    }
  }
};
</script>

<style scoped>
.license-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f7fa;
}

.login-box {
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  width: 500px;
}

.title {
  text-align: center;
  color: #303133;
  margin-bottom: 30px;
  font-size: 24px;
}

.camera-container {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.camera-view {
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.action-area {
  text-align: center;
  margin: 20px 0;
}

.recognition-btn {
  width: 200px;
  height: 40px;
  font-size: 16px;
}

.message-area {
  text-align: center;
  margin-top: 20px;
}

.server-msg {
  color: #409EFF;
  margin-bottom: 10px;
}

.welcome {
  color: #909399;
  font-size: 14px;
}

/* 响应式设计 */
@media screen and (max-width: 576px) {
  .login-box {
    width: 90%;
    padding: 20px;
  }

  .camera-view {
    width: 100% !important;
    height: auto !important;
  }

  .recognition-btn {
    width: 80%;
  }
}
</style>